<template>

    <div>
      <el-row :gutter="10">
          <el-col  :xs="6" :sm="10" :md="6" :lg="6" >
            <div class="grid-content bg-purple-light hidden-xs-only" style="font-size: 23px;color:#F66F6A;">
               追梦学习资源分享平台
           </div>
         </el-col>
          <el-col :xs="24" :sm="10" :md="10" :lg="10" v-if="username!=null">
            <div class="grid-content bg-purple-light" >

               <el-menu  class="el-menu-demo" mode="horizontal" >
                   <el-menu-item index="1"><router-link to="home" tag="a" style="text-decoration: none;">首页</router-link></el-menu-item>
                 <el-submenu index="4" v-show="isAdmin">
                   <template slot="title" >管理员权限</template>
                   <el-menu-item index="4-1" style="text-align: center;"><router-link to="goods" tag="a" style="text-decoration: none;">上架资料</router-link></el-menu-item>
                   <el-menu-item index="4-2" style="text-align: center;"><router-link to="list" tag="a" style="text-decoration: none;">列表查询</router-link></el-menu-item>
                    <el-menu-item index="4-3" style="text-align: center;"><router-link to="me" tag="a" style="text-decoration: none;">个人信息</router-link></el-menu-item>
                 </el-submenu>
                 <el-submenu index="2" v-show="!isAdmin" >
                   <template slot="title" >用户中心</template>
                   <el-menu-item index="2-1"  style="text-align: center;"><router-link to="me" tag="a" style="text-decoration: none;">个人信息</router-link></el-menu-item>
                   <!-- <el-menu-item index="2-2"><router-link to="me" tag="a">修改密码</router-link></el-menu-item> -->
                 </el-submenu>
                 <el-menu-item index="3"><router-link to="order" v-show="!isAdmin" tag="a" style="text-decoration: none;">个人订单</router-link></el-menu-item>
                 <el-menu-item class="hidden-xs-only" v-show="!isAdmin" index="4"> <el-button  size="small"  plain @click="open">消息</el-button></el-menu-item>
          </el-menu>
            </div>
          </el-col>
          <el-col :xs="24" :sm="4" :md="4" :lg="4">
              <div class="grid-content bg-purple-light hidden-xs-only" >
                  <div  style="text-align: center;float: right;">
                    <span style="color: #8C939D;">欢迎:</span><span style="color: plum;">{{username}}</span>
                  </div>
              </div>
          </el-col>
         <el-col :xs="24" :sm="4" :md="4" :lg="4">
           <div class="grid-content bg-purple-light hidden-xs-only " style="float: left;">

               <div style="margin-bottom: 10px;float: right;">
                    <el-avatar   class="hidden-xs-only" props="photo" v-if="photo==null" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                    <!--   <el-avatar :size="50" :fit="cover" v-else :src='getImgUrl(photo)'></el-avatar> -->
                    <img class="hidden-xs-only" style="width: 50px;height: 50px;border-radius: calc();"  v-else :src='getImgUrl(photo)'/>
                     <a  href="javascript:;"  style="color: palevioletred;text-decoration: none;" @click="logout()"><b>登录&nbsp;|</b></a> <a  href="javascript:;" style="color: purple;text-decoration: none;" @click="logout()"><b>退出</b></a>
                   <!-- <el-avatar  shape="square" :size="100" :fit="fit"  v-else :src='getImgUrl(photo)'></el-avatar> -->
                </div>
           </div>
         </el-col>
      </el-row>
    </div>
</template>

<script>
  export default{
    name:'Header',
    data(){
      return{
        isAdmin:this.$store.getters.getUser().isAdmin,
        fits: 'contain',
        token:this.$store.getters.getToken(),
        username:this.$store.getters.getUser().username,
        photo:this.$store.getters.getUser().photo,
      }
    },
    props:{

    },
    components:{},
    created() {

        },
    mounted() {

    },
    methods: {
      getImgUrl(photo){
        return this.apiUrl3+this.photo
      },
      logout(){
          let _this = this;
          this.axios.get(this.apiUrl2+'/user/logout?token='+this.token).then(res => {

            if(res.data.state){
              _this.$store.dispatch('asyncDelToken');
               this.$message({
                message: res.data.msg,
                type: 'success'
              });
               _this.$router.push('/login');
            }else{
              this.$message({
                message: res.data.msg,
                type: 'warning'
              });
            }

          });
      },

         open() {
                this.$notify({
                    position: 'bottom-left',
                   type: 'success',
                  title: '消息',
                  message: '本网站接单毕业设计，前端，后端，运维，按技术点，模块收费，有需求的童鞋请私下联系QQ2641410134，价格好商量'
                });
              }


    },
    computed: {}
  }
</script>

<style>

</style>
